import { StyleSheet, Text, View, ScrollView, Image, TouchableOpacity } from 'react-native';
import React, { useEffect } from 'react';
import { useRoute } from '@react-navigation/native';
import { useTranslation } from 'react-i18next';
import { scale } from '~/utils/px2dp';
import { px2dp } from '~/utils/px2dp';
import { NavBarHeader } from '~/components';
import { setHourNewPointer } from '~/utils/ble/application';
import { deviceStore, webSocketStore } from '~/store';

export default function BlePointer() {
    const router = useRoute();
    const { t } = useTranslation();
    const { linkSubDeviceStatus } = webSocketStore;
    const isDeviceConnected = (): boolean => {
        const connected = !(linkSubDeviceStatus === 0 && deviceStore.device.connectedDeviceStatus === 0);
        if (!connected) {
            Toast.show({ content: t('BlePointer.t20') });
        }
        return connected;
    };
    const handlePointerCommand = (type: 'hour' | 'minute', status: number) => {
        if (!isDeviceConnected()) return;
        newPointers({ type, status });
    };

    // 时针操作
    const hourReducePress = () => handlePointerCommand('hour', 3);
    const hourReduceLongPress = () => handlePointerCommand('hour', 1);
    const hourReduceOutPress = () => handlePointerCommand('hour', 5);
    const hourAddPress = () => handlePointerCommand('hour', 4);
    const hourAddLongPress = () => handlePointerCommand('hour', 2);
    const hourAddOutPress = () => handlePointerCommand('hour', 6);

    // 分针操作
    const minuteReducePress = () => handlePointerCommand('minute', 3);
    const minuteReduceLongPress = () => handlePointerCommand('minute', 1);
    const minuteReduceOutPress = () => handlePointerCommand('minute', 5);
    const minuteAddPress = () => handlePointerCommand('minute', 4);
    const minuteAddLongPress = () => handlePointerCommand('minute', 2);
    const minuteAddOutPress = () => handlePointerCommand('minute', 6);

    const newPointers = (res) => {
        const type = res.type;
        const status = res.status;
        const dic = {
            status: status,
            type: type,
        };
        setHourNewPointer(dic, router.params);
    };
    useEffect(() => {
        newPointers({ type: 'HA06X', status: 0 });
        return () => {
            newPointers({ type: 'HA06X', status: 7 });
        };
    }, []);
    return (
        <View style={styles.container}>
            <NavBarHeader title={t('BlePointer.title')} />
            <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.contentStyle}>
                <View style={styles.txtContainer}>
                    <Text style={styles.txt}>{t('BlePointer.t1')}</Text>
                    <Text style={styles.txtBlue}>{t('BlePointer.t2')}</Text>
                    <Image
                        source={require('~/assets/deviceTools/reducePointer.png')}
                        style={styles.addImg}
                        resizeMode={'contain'}
                    />
                    <Text style={styles.txt}>{t('BlePointer.t3')}</Text>
                    <Image
                        source={require('~/assets/deviceTools/addPointer.png')}
                        style={styles.addImg}
                        resizeMode={'contain'}
                    />
                    <Text style={styles.txt}>，{t('BlePointer.t4')}</Text>
                    <Text style={styles.txtBlue}>{t('BlePointer.t5')}</Text>
                    <Text style={styles.txt}>{t('BlePointer.t6')}</Text>
                    <Text style={styles.txtBlue}>{t('BlePointer.t7')}</Text>
                    <Text style={styles.txt}>{t('BlePointer.t8')}，</Text>
                    <Text style={styles.txtBlue}>{t('BlePointer.t9')}，</Text>
                    <Text style={styles.txt}>{t('BlePointer.t10')}</Text>
                    <Text style={styles.txtBlue}>{t('BlePointer.t11')}</Text>
                    <Text style={styles.txt}>{t('BlePointer.t12')}。</Text>
                </View>
                <Image
                    source={require('~/assets/deviceTools/surface.png')}
                    style={styles.surfaceImg}
                    resizeMode={'contain'}
                />

                <View style={styles.img_box}>
                    <Text style={styles.title}>{t('BlePointer.t13')}：</Text>
                    <View style={styles.txt_box}>
                        <TouchableOpacity
                            delayPressOut={100}
                            onPress={hourReducePress}
                            onLongPress={hourReduceLongPress}
                            onPressOut={hourReduceOutPress}>
                            <Image
                                source={require('~/assets/deviceTools/reducePointer.png')}
                                style={styles.addImgBig}
                                resizeMode={'contain'}
                            />
                        </TouchableOpacity>
                        <Text style={styles.img_txt}>{t('BlePointer.t14')}</Text>
                    </View>
                    <View style={styles.txt_box}>
                        <TouchableOpacity
                            delayPressOut={100}
                            onPress={hourAddPress}
                            onLongPress={hourAddLongPress}
                            onPressOut={hourAddOutPress}>
                            <Image
                                source={require('~/assets/deviceTools/addPointer.png')}
                                style={styles.addImgBig}
                                resizeMode={'contain'}
                            />
                        </TouchableOpacity>
                        <Text style={styles.img_txt}>{t('BlePointer.t15')}</Text>
                    </View>
                </View>

                <View style={styles.img_box}>
                    <Text style={styles.title}>{t('BlePointer.t16')}：</Text>
                    <View style={styles.txt_box}>
                        <TouchableOpacity
                            delayPressOut={100}
                            onPress={minuteReducePress}
                            onLongPress={minuteReduceLongPress}
                            onPressOut={minuteReduceOutPress}>
                            <Image
                                source={require('~/assets/deviceTools/reducePointer.png')}
                                style={styles.addImgBig}
                                resizeMode={'contain'}
                            />
                        </TouchableOpacity>
                        <Text style={styles.img_txt}>{t('BlePointer.t17')}</Text>
                    </View>
                    <View style={styles.txt_box}>
                        <TouchableOpacity
                            delayPressOut={100}
                            onPress={minuteAddPress}
                            onLongPress={minuteAddLongPress}
                            onPressOut={minuteAddOutPress}>
                            <Image
                                source={require('~/assets/deviceTools/addPointer.png')}
                                style={styles.addImgBig}
                                resizeMode={'contain'}
                            />
                        </TouchableOpacity>
                        <Text style={styles.img_txt}>{t('BlePointer.t18')}</Text>
                    </View>
                </View>
                <TouchableOpacity style={styles.btn_box} onPress={() => newPointers({ type: 'HA06X', status: 7 })}>
                    <Text style={styles.btn_txt}>{t('BlePointer.t19')}</Text>
                </TouchableOpacity>
            </ScrollView>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    contentStyle: {
        flexGrow: 1,
        paddingBottom: '20%',
        paddingHorizontal: px2dp(24),
        marginTop: px2dp(32),
    },
    txtContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'center',
    },
    txt: {
        color: '#111111',
        fontSize: scale(28),
        lineHeight: px2dp(50),
    },

    txtBlue: {
        color: '#2973FF',
        fontSize: scale(28),
        lineHeight: px2dp(50),
    },
    addImg: {
        width: px2dp(50),
        height: px2dp(50),
    },
    surfaceImg: {
        width: px2dp(500),
        height: px2dp(500),
        alignSelf: 'center',
        marginTop: px2dp(32),
    },
    addImgBig: {
        width: px2dp(68),
        height: px2dp(68),
    },
    txt_box: {
        flexDirection: 'column',
        alignItems: 'center',
        marginLeft: px2dp(40),
    },
    img_box: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        alignSelf: 'center',
        marginTop: px2dp(64),
    },
    title: {
        color: '#111111',
        fontSize: scale(32),
        fontWeight: 'bold',
    },

    img_txt: {
        color: '#727272',
        fontSize: scale(28),
        marginTop: px2dp(12),
    },
    btn_box: {
        width: px2dp(560),
        height: px2dp(88),
        backgroundColor: '#6B9EFE',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: px2dp(16),
        marginTop: px2dp(80),
        alignSelf: 'center',
    },

    btn_txt: {
        color: '#FFFFFF',
        fontSize: scale(36),
    },
});
